.fr {
  float: right;
}

.fl {
  float: left;
}

/*文字单行溢出省略号
	Name:			style_text-overflow
	Example:		class="text-overflow"
*/
.text-overflow {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap !important
}

/*线条
	Name:			style_line
	Example:		class="line"
*/
/* .line{font-size: 0rpx; line-height: 0rpx; border-top: solid 2rpx #eee; float: none} */
/*外边距
	Name:			style_margin
	Example:		class="mt-5|mt-10..."
	Explain:		.mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
*/
.m-5 {
  margin: 10rpx
}

.m-10 {
  margin: 20rpx
}

.m-15 {
  margin: 30rpx
}

.m-20 {
  margin: 40rpx
}

.m-25 {
  margin: 50rpx
}

.m-30 {
  margin: 60rpx
}

.m-35 {
  margin: 70rpx
}

.m-40 {
  margin: 80rpx
}

.m-50 {
  margin: 100rpx
}

.mt-5 {
  margin-top: 10rpx
}

.mt-10 {
  margin-top: 20rpx
}

.mt-15 {
  margin-top: 30rpx
}

.mt-20 {
  margin-top: 40rpx
}

.mt-25 {
  margin-top: 50rpx
}

.mt-30 {
  margin-top: 60rpx
}

.mt-35 {
  margin-top: 70rpx
}

.mt-40 {
  margin-top: 80rpx
}

.mt-50 {
  margin-top: 100rpx
}

.mb-5 {
  margin-bottom: 10rpx
}

.mb-10 {
  margin-bottom: 20rpx
}

.mb-15 {
  margin-bottom: 30rpx
}

.mb-20 {
  margin-bottom: 40rpx
}

.mb-30 {
  margin-bottom: 60rpx
}

.mb-40 {
  margin-bottom: 80rpx
}

.mb-50 {
  margin-bottom: 100rpx
}

.ml-5 {
  margin-left: 10rpx
}

.ml-10 {
  margin-left: 20rpx
}

.ml-15 {
  margin-left: 30rpx
}

.ml-20 {
  margin-left: 40rpx
}

.ml-30 {
  margin-left: 60rpx
}

.ml-40 {
  margin-left: 80rpx
}

.ml-50 {
  margin-left: 100rpx
}

.mr-5 {
  margin-right: 10rpx
}

.mr-10 {
  margin-right: 20rpx
}

.mr-15 {
  margin-right: 30rpx
}

.mr-20 {
  margin-right: 40rpx
}

.mr-30 {
  margin-right: 60rpx
}

.mr-40 {
  margin-right: 80rpx
}

.mr-50 {
  margin-right: 100rpx
}

/*内填充
	Name:			style_padding
	Example:		class="pt-5|pt-10|……"
	Explain:		.pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
*/
.pt-5 {
  padding-top: 10rpx
}

.pt-10 {
  padding-top: 20rpx
}

.pt-15 {
  padding-top: 30rpx
}

.pt-20 {
  padding-top: 40rpx
}

.pt-30 {
  padding-top: 60rpx
}

.pt-40 {
  padding-top: 80rpx
}

.pb-5 {
  padding-bottom: 10rpx
}

.pb-10 {
  padding-bottom: 20rpx
}

.pb-15 {
  padding-bottom: 30rpx
}

.pb-20 {
  padding-bottom: 40rpx
}

.pb-30 {
  padding-bottom: 60rpx
}

.pb-40 {
  padding-bottom: 80rpx
}

.pl-5 {
  padding-left: 10rpx
}

.pl-10 {
  padding-left: 20rpx
}

.pl-15 {
  padding-left: 30rpx
}

.pl-20 {
  padding-left: 40rpx
}

.pl-30 {
  padding-left: 60rpx
}

.pl-40 {
  padding-left: 80rpx
}

.pr-5 {
  padding-right: 10rpx
}

.pr-10 {
  padding-right: 20rpx
}

.pr-15 {
  padding-right: 30rpx
}

.pr-20 {
  padding-right: 40rpx
}

.pr-30 {
  padding-right: 60rpx
}

.pr-40 {
  padding-right: 80rpx
}

.pd-5 {
  padding: 10rpx
}

.pd-10 {
  padding: 20rpx
}

.pd-15 {
  padding: 30rpx
}

.pd-20 {
  padding: 40rpx
}

.pd-30 {
  padding: 60rpx
}

.pd-40 {
  padding: 80rpx
}

/* 边框，css3圆角
	Name:			style-border
	Example:		class="bk_gray radius"
	Explain:		.bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.radius-2 {
  border-radius: 4rpx
}

.radius-4 {
  border-radius: 8rpx
}

.radius-6 {
  border-radius: 12rpx
}

.radius-8 {
  border-radius: 16rpx
}

.radius-10 {
  border-radius: 20rpx
}

.radius-12 {
  border-radius: 24rpx
}

.radius-14 {
  border-radius: 28rpx
}

.radius-16 {
  border-radius: 32rpx
}

.radius-18 {
  border-radius: 36rpx
}

.radius-20 {
  border-radius: 40rpx
}

.radius-round {
  border-radius: 50%;
  overflow: hidden
}

/*css3阴影
	Name:			style_shadow
	Example:		class="box_shadow|text-shadow"
	Explain:		box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
					text-shadow 文字阴影
*/
.box-shadow {
  -webkit-box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1)
}

.text-shadow {
  -webkit-text-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
  text-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2)
}

/*行内分割竖线
	Name:			style_pipe
	Example:		<span class="pipe">|</span>
*/
.pipe {
  margin: 0 10rpx;
  color: #CCC;
  font-size: 20rpx !important
}

/*文字尺寸
	Name:			style_font-size
	Example:		class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
	Explain:		12rpx字体|14rpx字体|16rpx字体|18rpx字体|20rpx字体|24rpx字体|26rpx字体|28rpx字体|30rpx字体
*/
.f-10 {
  font-size: calc(var(--amplified_base) * 20rpx)
}

.f-11 {
  font-size: calc(var(--amplified_base) * 22rpx)
}

.f-12 {
  font-size: calc(var(--amplified_base) * 24rpx)
}

.f-14 {
  font-size: calc(var(--amplified_base) * 28rpx)
}

.f-16 {
  font-size: calc(var(--amplified_base) * 32rpx)
}

.f-18 {
  font-size: calc(var(--amplified_base) * 36rpx)
}

.f-20 {
  font-size: calc(var(--amplified_base) * 40rpx)
}

.f-24 {
  font-size: calc(var(--amplified_base) * 48rpx)
}

.f-26 {
  font-size: 52rpx
}

.f-28 {
  font-size: calc(var(--amplified_base) * 56rpx)
}

.f-30 {
  font-size: 60rpx
}

.f-32 {
  font-size: 64rpx
}

.f-36 {
  font-size: 72rpx
}

.f-40 {
  font-size: 80rpx
}

/*3.1.14 文字行距
	Name:			mod_line-height
	Example:		class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
	Explain:		16rpx行高|18rpx行高|20rpx行高|22rpx行高|24rpx行高|26rpx行高|30rpx行高
*/
.lh-16 {
  line-height: 32rpx
}

.lh-18 {
  line-height: 36rpx
}

.lh-20 {
  line-height: 40rpx
}

.lh-22 {
  line-height: 44rpx
}

.lh-24 {
  line-height: 48rpx
}

.lh-26 {
  line-height: 52rpx
}

.lh-28 {
  line-height: 56rpx
}

.lh-30 {
  line-height: 60rpx
}

.lh-10x {
  line-height: 1.0
}

.lh-12x {
  line-height: 1.2
}

.lh-15x {
  line-height: 1.5
}

.lh-18x {
  line-height: 1.8
}

.lh-20x {
  line-height: 2.0
}

.lh-30x {
  line-height: 3.0
}

/*3.1.15 文字颜色
	Name:			style_color
	Example:		class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
	Explain:		主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/

/*主要颜色*/
.c-primary,
.c-primary a,
a.c-primary {
  color: #409EFF
}

.c-primary a:hover,
a.c-primary:hover {
  color: #409EFF
}

/*次主色*/
.c-secondary,
.c-secondary a,
a.c-secondary {
  color: #175CFF
}

.c-secondary a:hover,
a.c-secondary:hover {
  color: #175CFF
}

/*强调色—成功*/
.c-success,
.c-success a,
a.c-success {
  color: #67C23A
}

.c-success a:hover,
a.c-success:hover {
  color: #67C23A
}

/*强调色—危险*/
.c-danger,
.c-danger a,
a.c-danger {
  color: #F56C6C
}

.c-danger a:hover,
a.c-danger:hover {
  color: #F56C6C
}

/*强调色—警告*/
.c-warning,
.c-warning a,
a.c-warning {
  color: #FFAA00
}

.c-warning a:hover,
a.c-warning:hover {
  color: #FFAA00
}


/*辅助色—浅黑*/
.c-333,
.c-333 a,
a.c-333 {
  color: #252438
}

.c-333 a:hover,
a.c-333:hover {
  color: #252438
}

/*辅助色—灰色*/
.c-666,
.c-666 a,
a.c-666 {
  color: #606066
}

.c-666 a:hover,
a.c-666:hover {
  color: #606066
}

.c-999,
.c-999 a,
a.c-999 {
  color: #909199
}

.c-999 a:hover,
a.c-999:hover {
  color: #909199
}

.c-remark,
.c-remark a,
a.c-remark {
  color: #C0C2CC
}

.c-remark a:hover,
a.c-remark:hover {
  color: #C0C2CC
}

/*标准色—红色*/
.c-red,
.c-red a,
a.c-red {
  color: red
}

.c-red a:hover,
a.c-red:hover {
  color: red
}

/*标准色—绿色*/
.c-green,
.c-green a,
a.c-green {
  color: green
}

.c-red a:hover,
a.c-red:hover {
  color: green
}

/*标准色—蓝色*/
.c-blue,
.c-blue a,
a.c-blue {
  color: blue
}

.c-blue a:hover,
a.c-blue:hover {
  color: blue
}

/*标准色—白色*/
.c-white,
.c-white a,
a.c-white {
  color: white !important;
}

.c-white a:hover,
a.c-white:hover {
  color: white
}

/*标准色—黑色*/
.c-black,
.c-black a {
  color: black
}

.c-black a:hover,
a.c-black:hover {
  color: black
}

/*标准色—橙色*/
.c-orange,
.c-orange a,
a.c-orange {
  color: orange
}

.c-orange a:hover,
a.c-orange:hover {
  color: orange
}

/* 渐变色 */
/* 翠柳 */
.linear-green {
  background: linear-gradient(45deg, #87DE0E 0%, #64BD38 100%) !important;
}

/* 麦黄 */
.linear-yellow {
  background: linear-gradient(45deg, #FBB437 0%, #FDD36D 100%) !important;
}

/* 靛青 */
.linear-blue {
  background: linear-gradient(45deg, #3485FF 0%, #1C68FF 100%) !important;
}

/* 魅红 */
.linear-red {
  background: linear-gradient(45deg, #F43F3B 0%, #EC008C 100%) !important;
}

/* 鎏金 */
.linear-orange {
  background: linear-gradient(45deg, #Ff9700 0%, #ed1c24 100%) !important;
}

/* 惑紫 */
.linear-purple {
  background: linear-gradient(45deg, #9000ff 0%, #5e00ff 100%) !important;
}

/* 霞彩 */
.linear-pink {
  background: linear-gradient(45deg, #EC008C 0%, #6739b6 100%) !important;
}


/* flex布局 */

.im-flex {
  display: flex;
}

.im-border-box {
  box-sizing: border-box;
}

.im-rows {
  flex-direction: row;
}

.im-rows-reverse {
  flex-direction: row-reverse !important;
}

.im-columns {
  flex-direction: column;
}

.im-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}

.im-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
}

.im-columns-reverse {
  flex-direction: column-reverse !important;
}


.im-space-around {
  justify-content: space-around;
}

.im-space-between {
  justify-content: space-between;
}

.im-justify-content-start {
  justify-content: flex-start;
}

.im-justify-content-center {
  justify-content: center;
}

.im-justify-content-end {
  justify-content: flex-end;
}

.im-align-items-start {
  align-items: flex-start;
}

.im-align-items-center {
  align-items: center;
}

.im-align-items-end {
  align-items: flex-end;
}

.im-align-content-start {
  align-content: flex-start;
}

.im-align-content-center {
  align-content: center;
}

.im-align-content-end {
  align-content: flex-end;
}

.im-flex1 {
  flex: 1;
}

.rotate45 {
  transform: rotate(45deg);
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate135 {
  transform: rotate(135deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate225 {
  transform: rotate(225deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.rotate315 {
  transform: rotate(315deg);
}

.rotate360 {
  transform: rotate(360deg);
}

/* 分割线 */
.parting-line-5 {
  padding: 5rpx;
  background: #f5f5f5;
}

.parting-line-10 {
  padding: 10rpx;
  background: #f5f5f5;
}

.parting-line-15 {
  padding: 15rpx;
  background: #f5f5f5;
}

.parting-line-20 {
  padding: 20rpx;
  background: #f5f5f5;
}

/* colorUI样式重写 */
.cu-list.menu-avatar>.cu-item:after {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200%;
  height: 1px;
  border-bottom: 1px solid #eee;
  border-radius: inherit;
  content: " ";
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
}

.cu-avatar.md {
  width: 72upx;
  height: 72upx;
  font-size: 1.5em;
}

.cu-list>.cu-item.move-cur.first {
  transform: translateX(-150upx) !important;
}

.cu-list>.cu-item .move.first {
  width: 150upx !important;
}

.cu-list>.cu-item.move-cur.second {
  transform: translateX(-300upx) !important;
}

.cu-list>.cu-item .move.second {
  width: 300upx !important;
}

.cu-list>.cu-item.move-cur.third {
  transform: translateX(-450upx) !important;
}

.cu-list>.cu-item .move.third {
  width: 450upx !important;
}